<template>
  <div class="progress-bar">
     <i-progress
      :percent="percent"
      hide-info
      :stroke-width="15"
    ></i-progress>
    <div class="curr-date">当前是 {{ currTime }}, {{ currWeek }}</div>
    <div>
      {{ currYear }}年已过去
      <span class="color-text primary-color">{{ passDays }}</span>
      天，占比
      <span class="color-text primary-color">{{ percent }}%</span>
    </div>
  </div>
</template>

<script>
  import moment from 'moment';
  const weeks = ['星期日', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六'];
  export default {
    data() {
      return {
        currWeek: '',
        currTime: '',
        currYear: '1999',
        passDays: 0,
        percent: 0
      }
    },
    created () {
      this.commonMethod();
    },
    onShow () {
      this.commonMethod();
    },
    methods: {
      commonMethod () {
        const daysOfYear = moment().dayOfYear(); // 今天是一年的第多少天
        const totalDays = moment().isLeapYear() ? 366 : 365; // 闰年为366天，平年为365天
        this.currWeek = weeks[moment().day()];
        this.currTime = moment().format('YYYY-MM-DD HH:mm');
        this.currYear = moment().year();
        this.passDays = daysOfYear;
        this.percent = (daysOfYear / totalDays * 100).toFixed(2);
      },
    },
  }
</script>

<style lang="less" scoped>
.progress-bar {
  text-align: center;
  font-size: 12px;
  margin: 20rpx 20rpx 60rpx;
  .curr-date {
    margin-top: 20rpx;
  }
  .color-text {
    font-size: 16px;
    font-weight: bold;
  }
}
</style>